<template>
    <div class="ulist">
        <div class="uitem" v-for="(l,i ) in list" :key="i" >
            <router-link :to="{name:'good',params:{gid:l.id},query:{name:l.name }}" class="aitem">
                <img v-lazy="l.img" alt="" class="img">
                <div class="ginfo">
                    <div class="name">
                        {{l.name}}
                    </div>
                    <div class="desc">
                        <div class="price">
                            ¥ {{l.price}}
                        </div>
                        <div class="type">
                            {{l.type.text}}
                        </div>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    props:['list']
}
</script>

<style lang="scss" scoped>
.ulist{
    padding:15px;
    overflow: auto;
    .uitem{
        width:100%;
        margin-bottom:15px;
        box-shadow: 0 0 2px 2px #ccc;
        border-radius: 15px;
        overflow: hidden;
        .aitem{
            display: block;
            .img{
                width:100%;
                height:260px;
            }
            .ginfo{
                width:100%;
                padding:10px;
                .name{
                    font-size: 15px;
                    color:#333;
                    width:100%;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                }
                .desc{
                    margin-top:10px;
                    display: flex;
                    justify-content: space-between;
                    .price{
                        color:#f50;
                    }
                    .type{
                        color:#123456;
                    }
                }
            }
        }
    }
}
</style>